<template>
    <div style="height:100%;overflow: hidden;"  @scroll="parentScroll">
        <el-scrollbar style="height:100%;overflow-y: scroll;overflow-x: hidden;" @scroll="childScroll">
            <div>
                <div style="height:300px;border:1px solid #000">hello</div>
                <div style="height:300px;border:1px solid #000">hello</div>
                <div style="height:300px;border:1px solid #000">hello</div>
                <div style="height:300px;border:1px solid #000">hello</div>
                <div style="height:300px;border:1px solid #000">hello</div>
                <div style="height:300px;border:1px solid #000">hello</div>
                <div style="height:300px;border:1px solid #000">hello</div>
                <div style="height:300px;border:1px solid #000">hello</div>
                <div style="height:300px;border:1px solid #000">hello</div>
            </div>

        </el-scrollbar>
    </div>
</template>
<script>
    export default {
        data(){
            return {}
        },
        created(){},
        methods:{
            parentScroll(){
                console.log('parent scroll' + Date.now())
            },
            childScroll(){
                console.log('child scroll' + Date.now())
            },
            grandSonScroll(){
                console.log('grandSon scroll' + Date.now())
            },
        }
    }
</script>
<style scoped>

</style>